<!DOCTYPE html>
<!-- 
 
	http://www.createjs.cc/
	
	http://www.createjs.cc/getting-started
 -->
<html>
	<head>
		<meta charset="utf-8">
		<title>使用HTML打造一款颜色配对游戏</title>
		<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
		<!-- <script src="https://code.createjs.com/1.0.0/easeljs.min.js"></script> -->
		<!-- <script src="https://code.createjs.com/1.0.0/tweenjs.min.js"></script> -->
		
		<script>
			function init(){
				var stage = new createjs.Stage("demoCanvas");
				var circle = new createjs.Shape();
				circle.graphics.beginFill("DeepSkyBlue").drawCircle(0, 0, 50);
				circle.x = 100;
				circle.y = 100;
				stage.addChild(circle);
				stage.update();
				
				//tweenjs
				createjs.Tween.get(circle, { loop: true })
				  .to({ x: 400 }, 1000, createjs.Ease.getPowInOut(4))
				  .to({ alpha: 0, y: 175 }, 500, createjs.Ease.getPowInOut(2))
				  .to({ alpha: 0, y: 225 }, 100)
				  .to({ alpha: 1, y: 200 }, 500, createjs.Ease.getPowInOut(2))
				  .to({ x: 100 }, 800, createjs.Ease.getPowInOut(2));
				  
				  createjs.Ticker.setFPS(60);
				  createjs.Ticker.addEventListener("tick", stage);
			}
		</script>
		
	</head>
	<body onload="init()">
		<canvas id="demoCanvas" width="600" height="400" style="border: black solid 1px;"></canvas>
 </body>
</html>